<!--  主页面轮播组件-->
<template>
  <div class="index-swiper">
    <!-- <mt-swipe :auto="3000" @change="handleChange">
      <mt-swipe-item v-for="swiperData in swiperDatas" :key="swiperData.id">
        <img :src="swiperData.pic" alt="轮播图片" />
      </mt-swipe-item>
    </mt-swipe> -->

    <div class="swiper-container banner-swiper">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="swiperData in swiperDatas"
          :key="swiperData.id"
        >
          <!-- alt:当图片加载加载不出时,显示的内容 -->
          <img :src="swiperData.pic" alt="轮播图片" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Swiper from "swiper";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      swiperDatas: [
        {
          id: 1,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg",
        },
        {
          id: 2,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg",
        },
        {
          id: 3,
          pic: "https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395260.jpg",
        },
      ],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  props: ["showFlag"],
  //监控data中的数据变化
  watch: {
    showFlag() {
      console.log(this.showFlag);
      if (this.showFlag) {
        this.swiperFun();
      }
    },
  },
  //方法集合
  methods: {
    // handleChange() {
    //   // 子传父
    //   // ①子组件:使用$emit('事件名','传递数据'),传递数据
    //   console.log(this.activeIndex);
    //   this.$emit("toIndexEvent", this.activeIndex);
    // },
    swiperFun() {
      // 将vue实例进行存储
      let vm = this;
      new Swiper(".banner-swiper", {
        loop: true,
        autoplay: {
          // 切换时间
          delay: 2000,
          // 切换到最后一个是否停止
          stopOnLastSlide: false,
          // 触摸后停止轮播
          disableOnInteraction: true,
        },
        on: {
          slideChange: function () {
            // 使用vue实例
            // realIndex:当前活动块的索引，在loop模式下不会将复制的块的数量计算在内。
            console.log(this.realIndex);
            vm.$emit("toIndexEvent", this.realIndex);
          },
        },
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.swiperFun();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    console.log("销毁");
  }, //生命周期 - 销毁完成
  activated() {
    console.log("激活");
  }, //如果页面有keep-alive缓存功能，激活
  deactivated() {
    console.log("非激活");
  }, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.index-swiper {
  width: calc(100% - 2rem);
  margin: -5rem auto 0;
  height: 12rem;
  .banner-swiper {
    height: 12rem;
    border-radius: 1rem;
    .swiper-slide {
      img {
        border-radius: 1rem;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    // 修改轮播图的指示器的默认样式
    // .mint-swipe-indicators {
    //   left: 10%;
    //   .mint-swipe-indicator {
    //     width: 0.6rem;
    //     height: 0.6rem;
    //   }
    //   .is-active {
    //     background-color: #000;
    //     opacity: 0.5;
    //   }
    // }
  }
}
</style>